<template>
  <view v-if="isShow">
    <view class="zhezhao"></view>
    <view class="box">
      <view class="title">说明</view>
      <view class="text" v-text="text" style="white-space:pre-wrap">
      </view>
      <view class="button" @click="isShow=false">我知道了</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      isShow: false
    };
  },
  methods: {
    show(text) {
      this.text = text;
      this.isShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.zhezhao {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.box {
  box-sizing: border-box;
  padding: 24upx;
  width: 600upx;
  height: auto;
  background-color: #fff;
  border-radius: 12upx;
  color: #333;
  font-size: 30upx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;

  .title {
    width: 100%;
    color: #333;
    font-size: 38upx;
    font-weight: 700;
    text-align: center;
    line-height: 100upx;
  }

  .text {
    max-height: 600upx;
    overflow: auto;
    padding-bottom: 20upx;
  }

  .button {
    width: 100%;
    height: 90upx;
    line-height: 90upx;
    text-align: center;
    font-size: 30upx;
    color: #fff;
    background-color: #FF6800;
    margin-top: 10upx;
  }
}
</style>
